/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Toast, Loading, Modal, ActionSheet } from '../../../library/func';
import Icon from '../../../project/style/icon';
import Http from '../../../project/func/http/http'
import time from '../../../project/func/util'

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class OrderDetail extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			background: '#f60',
			status: 'success',
			// 用户订单详情
			order:{},
			orderItem:[]
		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// didMount
	componentDidMount() {
		var id = this.$router.params.id;
		console.log('这个数据ID', id)
		// 获取用户订单详情 + this.$router.params.id
		Http.Loading({
			url: 'order/detail.php?id=' + id,
			success: (data) => {
				console.log("此页的订单信息>>>>>>",data.order)
				this.setState({
					order: data.order,
					orderItem: data.item
				},()=>{
					console.log('detail========================',this.state.orderItem)
				})
			}
		})
	}
	// didshow
	componentDidShow() {

	}
	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
	// onClick
	onClick = (id, e)=> {
		console.log('onClick: ' + id)
    }
    
    // onRedirect
    onRedirect = (url, e)=> {
        wx.redirectTo({
            url: url
        })
    }

    // onNavigate
    onNavigate = (url, e)=> {
		wx.navigateTo({
			url: url
		})
	}

	//navigateBack
	onNavigateBack = (url, e) => {
		wx.navigateBack({
			delta: 1
		})
	}


	
	// 用户取消订单操作
	cancelOrder = (id, e) => {
		Modal.confirm('确认执行此操作吗？', '取消订单', ()=> {

			Http.post({
				url:'order/logic/cancel.php',
				data:{
					id: id
				},
				success:(data)=>{

					Toast.success('取消订单成功！')
					setTimeout(()=>{
						wx.navigateTo({
							url: '/screen/user/order/list?status=已取消'
						});
					},1500)

				},
			})

		},()=>{

		})
	}

	// 用户完成订单操作
	onOk = (id, e) => {
		Modal.confirm('确认执行此操作吗？', '确认收货', ()=> {

			Http.post({
				url:'order/logic/complete.php',
				data:{
					id: id
				},
				success:(data)=>{
					Toast.success('确认收货成功！')
					setTimeout(()=>{
						wx.navigateTo({
							url: '/screen/user/order/list?status=已完成'
						});
					},1500)
				},
			})

		},()=>{

		})
	}

	// 用户支付未付款订单
	payOrder = (order, e) => {
		console.log("实际付款的东西");


		let orderid = order.id
		let orderid_new = orderid + '-' + (new Date()).getTime();
		let total_fee = order.set_amount * 100;

		// 从localStorage 查询 openid
		wx.getStorage({
			key: 'openid',
			success(res) {
				let openid = res.data;
				wx.request({
					url: 'https://activepage.sgboke.com/pay/wepay/jsapi.php',
					method: 'POST',
					data: {
						key: 'rushbuy',
						orderid: orderid_new,
						total_fee: total_fee,
						openid: openid
					},
					header: {
						'content-type': "application/x-www-form-urlencoded",
					},
					success(res) {
						console.log('789==============',res)

						// 取参数
						let nonceStr = res.data.nonceStr;
						let prepay_id = res.data.package;
						let paySign = res.data.paySign;
						let timeStamp = res.data.timeStamp;

						// 调起支付 
						wx.requestPayment({
							timeStamp: timeStamp.toString(),
							nonceStr: nonceStr,
							package: prepay_id,
							signType: 'MD5',
							paySign: paySign,

							// 支付成功
							success: function(res) {
								console.log('成功');
								console.log(res);

								/**
								 * 支付成功，调整订单状态，并跳转到未发货页面
								 */
								Http.post({
									url: 'order/logic/ok.php',
									data: {
										orderid: orderid
									},

									// 调整订单状态成功
									success(res) {
										console.log('**********************成功呢')
										// wx.redirectTo({
										//     url: '/screen/user/order/list?status=未发货'
										// });
									},
									code(err) {
										console.log('支付失败：调整订单状态，逻辑失败！');
										console.log(err);
									},
									server(err) {
										console.log('支付失败：调整订单状态，服务器失败！');
										console.log(err);
									},
									net(err) {
										console.log('支付失败：调整订单状态，网络失败！');
										console.log(err);
									}
								});
							},

							// 支付失败
							fail: function(err) {
								console.log('失败');
								console.log(err);
								console.log('**********************成功呢')
								/**
								 * 支付失败，跳转到未支付页
								 */
								// wx.redirectTo({
								//     url: '/screen/user/order/list?status=未付款'
								// });
							}
						})
						// console.log(res);
					},
					fail(err) {
						console.log('支付失败：网络失败！');
					}
				})
			}
		})




	}

	// 复制订单号
    copyText = (e) => {
        wx.setClipboardData({
            data: this.state.order.set_orderid,
            success: function(res) {
             wx.getClipboardData({
                success: function(res) {
                 console.log(res.data) // data
                }
             })
            }
        })       
    }

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	config = {
        navigationBarTitleText: '订单详情',
        navigationBarBackgroundColor: '#dd2f3c',
        navigationBarTextStyle: '#fff'
    }
	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		return (
			<CPage>
				<CContent mb='100'>
					
					{/* 顶部订单状态 */}
					<CRow bg='#fff' x='center' py='40'>
						<CItemX y='center'>
							{/* 已发货显示 */}
							{this.state.order.enum_status == '已发货' && <CImage src='http://image.mod.hesq.com.cn/rushbuy/assets/20181113/status_01.jpg' w='136' h='90'/>}

							{/* 交易成功显示 */}
							{this.state.order.enum_status == '已完成' && <CImage src='http://image.mod.hesq.com.cn/rushbuy/assets/20181113/status_03.jpg' w='136' h='90'/>}

							{/* 未付款显示 */}
							{this.state.order.enum_status == '未付款' && <CImage src='http://image.mod.hesq.com.cn/rushbuy/assets/20181113/status_02.jpg' w='120' h='90'/>}

							{/* 未发货显示 */}
							{this.state.order.enum_status == '未发货' && <CImage src='http://image.mod.hesq.com.cn/rushbuy/assets/20181113/status_02.jpg' w='120' h='90'/>}

							{/* 已取消显示 */}
							{this.state.order.enum_status == "已取消" && <CImage src='http://image.mod.hesq.com.cn/rushbuy/assets/20181113/status_02.jpg' w='120' h='90'/>}

                            <CItemY pl='20' x='left'>
								{/* 已完成显示 */}
								{this.state.order.enum_status == '已完成' && <CText size='28'>交易成功！</CText>}
                                
								{/* 已发货显示 */}
								{this.state.order.enum_status == '已发货' && <CText size='28'>卖家已发货！</CText>}

								{/* 未发货显示 */}
								{this.state.order.enum_status == '未发货' && <CText size='28'>已付款，等待卖家发货！</CText>}

								{/* 未付款显示 */}
								{this.state.order.enum_status == '未付款' && <CText size='28'>等待买家付款！</CText>}

								{/* 已取消显示 */}
								{this.state.order.enum_status == '已取消' && <CText size='28'>订单已取消！</CText>}

								<CHand>
									<CText size='28'>订单金额</CText>
									<text style="font-size:28rpx; color:#d03e3e">￥{ this.state.order.set_amount }</text>
									{/* <CText size='28'>(含运费</CText>
									<CText size='28' color='#d03e3e'>￥0</CText> */}
									{/* <CText size='28'>)</CText> */}
								</CHand>
                            </CItemY>
                        </CItemX>
					</CRow>

					{/* 收货地址信息 */}
					<CColumn bg='#fff' ma='20' ra='16' pa='20'>
						<CBetween>
							<CHand>
								<CSvg icon={Icon.location} w='36' h='36'></CSvg>
								<CHand size='28' pl='16'>{this.state.order.set_take_name}</CHand>
							</CHand>
							<CHand>
								<CHand size='28'>{this.state.order.set_take_mobile}</CHand>
							</CHand>
						</CBetween>
						<CRow x='left' mt='16' ml="55">
							<CHand size='28'>{this.state.order.set_take_address}</CHand>
						</CRow>
					</CColumn>

					{/* 商品信息 */}
					<CColumn bg='#fff' ma='20' ra='16'>

						{/* 店铺名称 */}
						<CLine px='20' py='30'>
							<CSvg icon={Icon.store} w='38' h='36'></CSvg>
							<CText size='28' pl='16'>每日一达</CText>
						</CLine>

						{/* 商品信息 */}
						{this.state.orderItem.map(item=>{
							return (
								<CLine bg='#f9f9f9' pa='16' y='center' bb='2 solid #f6f6f6'>
									<CImage src='http://image.cdn.hesq.com.cn/rushbuy/product/{{item.set_image}}' w='140' h='140'/>
									<CColumn pl='20'>
										<CBetween >
											<CText size='28' color='#252525'>{item.set_name}</CText>
											<CText size='28' pl='30' pr='20'  color='#252525'>￥{item.set_price}</CText>
										</CBetween>
										<CBetween pt='20'>
											<CText size='28' color='#aaa'>x{item.count}</CText>
											<CHand>
												{(item.is_comment == 0 && order.enum_status=='已完成')  && <CButton ba='2 solid #d65453' color='#d65453'  pl='30' pr='20' ra='100' py='4' style='font-size:28rpx;' onClick={this.onNavigate.bind(this, '/screen/user/order/comment?oiid='+item.id)}>评价</CButton>}
											</CHand>
										</CBetween>
									</CColumn>
								</CLine>
							)
						})}

						{/* 订单信息底部部分 */}
						<CBetween bg='#fff' pa='30' y='center' bb='2 solid #f2f2f2'>
							<CText size='28'>配送方式</CText>
							<CText size='28' color='#d65453'>包邮</CText>
						</CBetween>
						<CLine bg='#fff' pa='30' x='right' bb='2 solid #f2f2f2'>
							<CText size='28'>共计1件商品,实付：</CText>
							<CHand size='32' color='#cc2d2e' bold>￥{this.state.order.set_amount}</CHand>
						</CLine>
						<CBetween pa='30'>
							<CItemY x='left'>
								<CHand color='#c6c6c6' size='26'>每日一达订单号: {this.state.order.set_orderid}</CHand>
								<text style="color:#c6c6c6; font-size:26rpx">成交时间: {time.formatTime(this.state.order.time_submit, 'Y-M-D h:m:s')}</text>
							</CItemY>
							<CHand pl='8'>
								<CBetween ba='2 solid #cc2d2e' x='center' ra='100' color='#cc2d2e' px='16' py='6' style='font-size:28rpx;' onClick={this.copyText}>复制单号</CBetween>
							</CHand>
						</CBetween>

					</CColumn>
				</CContent>

				{/* Footer */}
				<CFooter h='100' bg='#fff' y='center'>

					<CBetween px='20'>
						{/* <CRow>
							<CButton style='font-size:28rpx;' ba='1 solid #cb2829' ra='50' py='3' px='10'color='#cb2829' onClick={this.onNavigate.bind(this, '')}>联系卖家</CButton>
						</CRow> */}
						<CRow x='right'>

							{/* 已完成显示 */}
							{/* {this.state.detail.order.enum_status == '已完成' && 
								<CButton ba='1 solid #cb2829' bg='#cb2829' ml='10' ra='50' py='3' px='10'color='#fff' style='font-size:28rpx;' onClick={this.onNavigate.bind(this, '')}>评论订单</CButton>
							} */}

							{/* 已发货显示 */}
							{/* {this.state.detail.order.enum_status == '已发货' && 
								<CButton ba='1 solid #cb2829' bg='#cb2829' ml='10' ra='50' py='3' px='10'color='#fff' style='font-size:28rpx;' onClick={this.onOk.bind(this, '')}>确认收货</CButton>	
							} */}

							{/* 未付款显示 */}
							{/* {this.state.detail.order.enum_status == '未付款' && 
								<CHand>
									<CButton style='font-size:28rpx;' ba='1 solid #cb2829' ra='50' py='3' px='10'color='#cb2829' onClick={this.cancelOrder.bind(this, '')}>取消订单</CButton>
									<CButton ba='1 solid #cb2829' bg='#cb2829' ml='10' ra='50' py='3' px='10'color='#fff' style='font-size:28rpx;' onClick={this.payOrder.bind(this, '')}>付款</CButton>
								</CHand>
							} */}

							{/* 已完成显示 */}
							{this.state.order.enum_status == '已完成' && 
								<CButton ba='2 solid #cb2829' bg='#cb2829' ml='20' ra='100' py='6' px='20' color='#fff' style='font-size:28rpx;' onClick={this.onNavigateBack.bind(this)}>返回列表</CButton>
							}

							{/* 已发货显示 */}
							{this.state.order.enum_status == '已发货' && 
								<CButton ba='2 solid #cb2829' bg='#cb2829' ml='20' ra='100' py='6' px='20' color='#fff' style='font-size:28rpx;' onClick={this.onOk.bind(this, this.state.order.id)}>确认收货</CButton>	
							}

							{/* 未付款显示 */}
							{this.state.order.enum_status == '未付款' && 
								<CHand>
									<CButton style='font-size:28rpx;' ba='2 solid #cb2829' ra='100' py='6' px='20' color='#cb2829' onClick={this.cancelOrder.bind(this, this.state.order.id)}>取消订单</CButton>
									<CButton ba='2 solid #cb2829' bg='#cb2829' ml='20' ra='100' py='6' px='50' color='#fff' style='font-size:28rpx;' onClick={this.payOrder.bind(this, this.state.order)}>付款</CButton>
								</CHand>
							}

							{/* 未发货显示 */}
							{this.state.order.enum_status == '未发货' && 
								<CHand>
									<CButton style='font-size:28rpx;' ba='2 solid #cb2829' bg='#cb2829' ra='100' py='6' px='20'color='#fff' onClick={this.onNavigateBack.bind(this)}>返回列表</CButton>
								</CHand>
							}

							{/* 已取消显示 */}
							{this.state.order.enum_status == '已取消' && 
								<CHand>
									<CButton style='font-size:28rpx;' ba='2 solid #cb2829' bg='#cb2829' ra='100' py='6' px='20'color='#fff' onClick={this.onNavigateBack.bind(this)}>返回列表</CButton>
								</CHand>
							}
							
						</CRow>
					</CBetween>
					
				</CFooter>
			</CPage>
		)
	}
}


